<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>首页</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/vant.css">

    <style>
        .van-sidebar-item--select::before {
            display: none !important;
        }

        .h100vh {
            height: 100vh !important;
        }
        .footer-btn{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        img{
            object-fit: cover;
        }
    </style>

</head>

<body>
    <div class="app" v-cloak>
        <div class="main collect-visited">
            <div class="aside navs">
                <van-sidebar v-model="activeKey" style="width: 100%;" offset-top=".5rem">
                    <van-sidebar-item :title="nav.name" :key="index" v-for="(nav, index) in navItems"
                        :class="[nav.styleClass, 'nav-link', activeNav === nav.specialClass ? 'active' : '' ]"
                        @click="changeNav(nav.modules)" />
                </van-sidebar>
            </div>
            <div class="section">
                <van-pull-refresh v-model="refreshing" pulling-text="下拉更新有惊喜" loosing-text="松开可以刷新" @refresh="onRefresh" v-show="deviceList && deviceList.length>0">
                    <van-list v-model="loading" :finished="finished"  finished-text="没有更多了" @load="onLoad"
                        :class="{h100vh:deviceList.length < 5}" style="margin-bottom: .8rem;">
                        <div class="video" v-show="activeNav === 'VIDEO_SHOW'">
                            <div class="video-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div class="preview-img "><img v-lazy="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                </div>
                                <div class="right">
                                    <p class="video-name">{{device.title}}</p>
                                    <div class="date">{{device.publishTime | handleTimePlus('//::')}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="advertise" v-show="activeNav === 'RECRUIT'">
                            <div class="production-item relative" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                <div class="top">
                                    <div class="occupation-name">{{device.workTypeName}}
                                        <div class="advertise-status" :class="device.status == 0 ? 'stop':'doing'">
                                            {{device.status == 0?'停止招聘':'招聘中'}}</div>
                                    </div>
                                    <div v-if="device.status == 1">
                                        <div class="month-salary" v-if="device.salary">{{Number(device.salary).toFixed(2)}} {{device.salaryUnitName}}</div>
                                        <div class="month-salary" v-else>面议</div>
                                    </div>
                                </div>
                                <div class="requirements">
                                    <div class="exp flex-box" v-for="item in device.tags">{{item.name}}</div>
                                </div>
                                <div class="info">
                                    <div class="addr">{{device.addressName}}</div>
                                    <div class="date">{{device.publishTime | handleTimePlus('//::')}}</div>
                                    <div class="tel" @click.stop="callTel(device.phone)">
                                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/tel.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="advertise" v-show="activeNav === 'JOB'">
                            <div class="production-item relative" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit">
                                </div>
                                <div class="top">
                                    <div class="occupation-name">{{device.workTypeName}}
                                        <div class="advertise-status" :class="device.status == 0 ? 'stop':'doing'">
                                            {{device.status == 0?'停止求职':'求职中'}}</div>
                                    </div>
                                    <div v-if="device.status == 1">
                                        <div class="month-salary" v-if="device.salary">
                                            <span class="price-unit">¥</span>
                                            {{Number(device.salary).toFixed(2)}} {{device.salaryUnitName}}
                                        </div>
                                        <div class="month-salary" v-else>面议</div>
                                    </div>
                                </div>
                                <div class="requirements">
                                    <div class="exp flex-box" v-for="item in device.tags">{{item.name}}</div>
                                </div>
                                <div class="info">
                                    <div class="addr">{{device.addressName}}</div>
                                    <div class="date">{{device.publishTime | handleTimePlus('//::')}}</div>
                                    <div class="tel" @click.stop="callTel(device.phone)">
                                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/tel.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="companys" v-show="activeNav === 'MAINTENANCE'">
                            <div class="company-item relative" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"> </div>
                                <div class="company-name ">
                                    {{device.shopName}}</div>
                                <div class="company-addr">{{device.addressName}}</div>
                                <div class="company-attr-items">
                                    <div class="company-attr" v-for="(tag,idx) in device.tags" :key="idx">{{tag.name}}
                                    </div>
                                </div>
                                <div class="contact">
                                    <div class="customer contact-item">
                                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/customer.png" alt=""
                                            @click.stop="gIMCommon(device.userId)">
                                    </div>
                                    <div class="navigation contact-item">
                                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/navgation.png" alt="" @click.stop="goMap(device)">
                                    </div>
                                    <div class="tel contact-item" @click.stop="callTel(device.phone)">
                                        <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/tel.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="productions " v-show="['FOR_GOODS','FOR_CAR'].indexOf(activeNav)>-1">
                            <div class="production-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div class="preview-img  preview-img-item"><img :src="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>

                                </div>
                                <div class="right">
                                    <p class="production-name">{{device.title}}</p>
                                    <div class="pos-station">
                                        <div class="from-station">{{device.departureCityName}}</div>
                                        <img class="pos-station-icon" src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/mine/topos.png" alt="">
                                        <div class="to-station">{{device.destinationCityName}}</div>
                                    </div>
                                    <div class="mileage">{{device.distance | filterDistance}}</div>

                                    <div class="production-price" v-if="device.freight !== null">
                                        <span class="price-unit">¥</span>
                                        {{Number(device.freight).toFixed(2)}} {{device.freightUnitName}}
                                    </div>
                                    <div class="production-price" v-else>面议</div>
                                </div>
                            </div>
                        </div>
                        <div class="devices" v-show="['BUY_DEVICE','RENT_DEVICE'].indexOf(activeNav)>-1">
                            <div class="device-item relative" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                {{device.title}}
                                <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                            </div>
                        </div>
                        <div class="rongzi" v-show="activeNav === 'INSURANCE'">
                            <div class="rongzi-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div class="preview-img">
                                    <img v-lazy="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                </div>
                            </div>
                        </div>
                        <div class="peijian" v-show="activeNav === 'STEEL'">
                            <div class="peijian-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device,)">
                                <div class="preview-img">
                                    <img v-lazy="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                </div>
                                <div class="right">
                                    <p class="peijian-name" v-text="device.title"></p>
                                    <div class="steel-spec">
                                        规格: {{device.model}}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="peijian" v-show="['SELL_DEVICE','LEASE_DEVICE','PARTS'].indexOf(activeNav)>-1">
                            <div class="peijian-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device,)">
                                <div class="preview-img">
                                    <img v-lazy="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                </div>
                                <div class="right">
                                    <p class="peijian-name" v-text="device.title"></p>
                                    <div class="price" v-if="device.price === null || device.price === ''">
                                        面议
                                    </div>
                                    <div class="price" v-else>
                                        <div class="unit-price">¥</div>
                                        {{filterPrice(device.price)}} {{device.unitName}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cangchu" v-show="activeNav === 'STORAGE'">
                            <div class="cangchu-item" v-for="(device,index) in deviceList" :key="index"
                                @click="changeEdit(device)">
                                <div class="preview-img"><img v-lazy="device.imageUrl" alt="">
                                    <div :class="['item-edit-btn', {active: device.editStatus}]" v-show="isEdit"></div>
                                </div>
                                <div class="right">
                                    <p class="cangchu-name">{{device.title}}</p>
                                    <div class="info">
                                        <div class="info-item">{{device.storageTypeName}}</div>
                                        <div class="info-item">{{device.area}} m²</div>
                                    </div>
                                    <div class="price" v-if="device.price !== null">{{Number(device.price).toFixed(2)}} {{device.unitName}}</div>
                                    <div class="price" v-else>面议</div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <div v-show="deviceList && deviceList.length===0" class="collect-empty">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                    <div>{{ title == '我的收藏' ? '您还没有收藏的内容哦～' : '无浏览记录'}}</div>
                </div>
            </div>
        </div>
        <div class="footer-btn" v-show="isEdit">

            <div class="select-all" @click="selectAll">
                <img :src="selectAllClass ? 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/edit_active.png' : 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/edit_no.png'" alt="">
                全选
            </div>
            <div class="delete-btn" @click="delDevice">删除</div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/vue-lazyload.js"></script>

    <script>
        apiready = function () {
            imgLazyLoad();
            var vm = new Vue({
                el: '.app',
                data() {
                    let navItems = [{
                        name: "设备出售",
                        styleClass: "peijian",
                        specialClass: "chushou",
                        modules: "SELL_DEVICE"
                    }, {
                        name: "设备求购",
                        styleClass: "devices",
                        specialClass: "qiugou",
                        modules: "BUY_DEVICE"
                    }, {
                        name: "设备出租",
                        styleClass: "peijian",
                        specialClass: "chuzu",
                        modules: "LEASE_DEVICE"

                    }, {
                        name: "设备求租",
                        styleClass: "devices",
                        specialClass: "qiuzu",
                        modules: "RENT_DEVICE"
                    }, {
                        name: "货找车",
                        styleClass: "productions",
                        specialClass: "huozhaoche",
                        modules: "FOR_CAR"
                    }, {
                        name: "车找货",
                        styleClass: "productions",
                        specialClass: "chezhaohuo",
                        modules: "FOR_GOODS"
                    }, {
                        name: "配件",
                        styleClass: "peijian",
                        specialClass: "peijian",
                        modules: "PARTS"
                    }, 
                    
                    // {
                    //     name: "仓储",
                    //     styleClass: "cangchu",
                    //     specialClass: "cangchu",
                    //     modules: "STORAGE"
                    // },
                    
                    {
                        name: "求职",
                        styleClass: "advertise",
                        specialClass: "qiuzhi",
                        modules: "JOB"
                    }, {
                        name: "招聘",
                        styleClass: "advertise",
                        specialClass: "zhaopin",
                        modules: "RECRUIT"
                    }, {
                        name: "维修保养",
                        styleClass: "companys",
                        specialClass: "weihu",
                        modules: "MAINTENANCE"
                    // }, {
                    //     // name: "融资保险",
                    //     name: "三方服务",
                    //     styleClass: "rongzi",
                    //     specialClass: "rongzi",
                    //     modules: "INSURANCE"
                    }, {
                        name: "二手材料",
                        styleClass: "rongzi",
                        specialClass: "rongzi",
                        modules: "STEEL"
                    }
                    // , {
                    //     name: "视频演示",
                    //     styleClass: "video",
                    //     specialClass: "video",
                    //     modules: "VIDEO_SHOW"
                    // }
                ]
                    return {
                        devices: [{
                            id: 1,
                            type: "液压挖掘机",
                            brand: "科特壁垒",
                            num: 320,
                            addr: "上海市宝山区",
                            生产年份: "2020/11/12",
                            desc: "我是挖掘机"
                        }],
                        activeNavs: ["peijian", "chushou"],
                        activeNav: "SELL_DEVICE",
                        isEdit: false,
                        selectAllClass: false,
                        navItems,
                        deviceList: [],
                        activeKey: 0,
                        pageNum: 1,
                        pageSize: 10,
                        title: api.pageParam.title,
                        loading: false,
                        finished: false,
                        refreshing: false,
                    }
                },
                filters: {
                    handleTimePlus:handleTimePlus,
                    filterDistance(val) {
                        val = val / 1000
                        if (val > 500) {
                            return '500km以上'
                        } else {
                            return val.toFixed(1) + 'km'
                        }
                    }
                },
                mounted() {
                    console.log(JSON.stringify(api.pageParam));
                    this.getData()
                },
                methods: {
                    goMap(device) {
                        openMap(device.location, device.addressName)
                    },
                    onRefresh() {
                        // 清空列表数据
                        this.finished = false;
                        // 重新加载数据
                        // 将 loading 设置为 true，表示处于加载状态
                        this.loading = true;
                        this.pageNum = 1
                        this.getData()
                    },
                    onLoad() {
                        this.getData()
                    },

                    delDevice() {
                        var vm = this;
                        api.confirm({
                            msg: '是否删除？',
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
                            if (ret.buttonIndex == 1) {
                                var moduleMediaIdList = []
                                vm.deviceList.map(item => {
                                    if (item.editStatus) {
                                        moduleMediaIdList.push(item.id)
                                    }
                                })
                                var url = api.pageParam.title == '浏览历史' ? interfaces.PRODUCT_MODULE
                                    .BROWSE.DEL_BROWSE : interfaces.PRODUCT_MODULE.COLLECTION
                                    .DEL_COLLECT
                                fnBodyPost(url, {
                                    module: vm.activeNav,
                                    moduleMediaId: moduleMediaIdList
                                }, function (ret, err) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        for (var i = moduleMediaIdList.length - 1; i >=
                                            0; i--) {
                                            vm.deviceList.splice(i, 1);
                                        }
                                        vm.selectAllClass = false;
                                        toastMiddle('删除成功');
                                    } else {
                                        toastMiddle(ret ? ret.msg : '');
                                    }
                                })
                            }
                        });
                    },
                    callTel(phone) {
                        phone = phone.split(',')
                        api.actionSheet({
                            cancelTitle: '取消',
                            buttons: phone
                        }, function (ret, err) {
                            if (ret.buttonIndex > phone.length) return false;
                            api.call({
                                type: 'call_type',
                                number: phone[ret.buttonIndex - 1]
                            });
                        });
                    },
                    getData() {
                        var vm = this,
                            url;
                        if (vm.title === '我的收藏') {
                            console.log("收藏")
                            url = interfaces.PRODUCT_MODULE.COLLECTION.GET_PAGE
                        } else {
                            console.log("浏览")
                            url = interfaces.PRODUCT_MODULE.BROWSE.GET_BROWSE
                        }
                        fnGet(url, {
                                pageNum: vm.pageNum,
                                pageSize: vm.pageSize,
                                module: vm.activeNav
                            }, true,
                            function (ret, err) {
                                console.log("数据：" + JSON.stringify(ret))
                                if (ret && ret.code === RESPONSE_OK) {
                                    if (vm.refreshing) {
                                        vm.deviceList = [];
                                        vm.refreshing = false;
                                    }
                                    var list = ret.data.list
                                    list.map(item => {
                                        item.editStatus = false
                                    })
                                    if (vm.pageNum === 1) {
                                        vm.deviceList = list
                                    } else {
                                        vm.deviceList = vm.deviceList.concat(list)
                                    }
                                    console.log(JSON.stringify(list))
                                    vm.loading = false;
                                    vm.pageNum++
                                    if (!ret.data.hasNext) {
                                        vm.finished = true;
                                    }

                                } else {
                                    toastMiddle(ret ? ret.msg : '');
                                }
                            }
                        );
                    },
                    changeNav(modules) {
                        // 选择nav
                        if (this.activeNav === modules) return
                        this.activeNav = modules;
                        this.pageNum = 1
                        this.loading = true; //下拉加载中
                        this.finished = false; //下拉结束
                        if (this.loading) {
                            this.onLoad();
                        }
                        // 改变 nav 取消编辑
                        this.isEdit = false;
                        api.sendEvent({
                            name: 'cvIsEdit',
                            extra: {
                                isEdit: this.isEdit
                            }
                        })
                    },
                    selectAll() {
                        this.selectAllClass = !this.selectAllClass;
                        this.deviceList.forEach(d => d.editStatus = this.selectAllClass);
                    },
                    changeEdit(item) {
                        if (this.isEdit) {
                            item.editStatus = !item.editStatus;
                            var deviceIndex = this.deviceList.findIndex(item => !item.editStatus)
                            if (deviceIndex > -1) {
                                this.selectAllClass = false
                            } else {
                                this.selectAllClass = true
                            }
                        } else {
                            console.log("跳转：" + JSON.stringify(item))
                            var url, name, pageParam
                            if (['SELL_DEVICE', 'LEASE_DEVICE', 'PARTS'].indexOf(this.activeNav) > -1) {
                                name = 'goods_detail_win'
                                url = '../whole_sale/goods_detail_win.html'
                                pageParam = {
                                    detailItem: item,
                                    title: this.activeNav
                                }
                            } else if (['BUY_DEVICE', 'RENT_DEVICE'].indexOf(this.activeNav) > -1) {
                                name = 'ask_rent_win'
                                url = '../whole_sale/ask_rent_win.html'
                                pageParam = {
                                    detailItem: item,
                                    title: this.activeNav
                                }
                            } else if (['FOR_GOODS', 'FOR_CAR', 'STORAGE'].indexOf(this.activeNav) > -1) {
                                var type = this.activeNav === 'STORAGE' ? 1 : 0
                                var status = ''
                                if (this.activeNav != 'STORAGE') {
                                    status = this.activeNav === 'FOR_CAR' ? 1 : 2
                                }
                                name = 'warehouse_logistics_detail_win'
                                url = '../warehouse_logistics/warehouse_logistics_detail_win.html'
                                pageParam = {
                                    type: type,
                                    status: status,
                                    id: item.id
                                }
                            } else if (['JOB', 'RECRUIT'].indexOf(this.activeNav) > -1) {
                                var type = this.activeNav === 'JOB' ? 1 : 0
                                name = 'recruit_detail_win'
                                url = '../recruit/recruit_detail_win.html'
                                pageParam = {
                                    id: item.id,
                                    title: item.workTypeName,
                                    type: type
                                }
                            } else if (this.activeNav === 'MAINTENANCE') {
                                name = 'maintenance_detail_win'
                                url = '../maintenance/maintenance_detail_win.html'
                                pageParam = {
                                    id: item.id,
                                    title: item.shopName
                                }
                            } else if (this.activeNav === 'INSURANCE') {
                                name = 'financinginsurance_detail_win'
                                url = '../financinginsurance/financinginsurance_detail_win.html'
                                pageParam = {
                                    item: item,
                                    title: item.title
                                }
                            } else if (this.activeNav === 'VIDEO_SHOW') {
                                name = 'video_demonstrate_win'
                                url = '../video_demonstrate/video_demonstrate_win.html'
                                pageParam = {
                                    videoId: item.videoId
                                }
                            } else if (this.activeNav === 'STEEL') {
                                name = 'deformed_detail_win'
                                url = '../deformed_steel/deformed_detail_win.html'
                                pageParam = {
                                    id: item.id
                                }
                            }
                            api.openWin({
                                name: name,
                                url: url,
                                bounces: false,
                                pageParam: pageParam
                            });
                        }


                    },
                    forwardPage(url, relative, options) {
                        url = url + ".html";
                        api.openWin({
                            name: url,
                            url: (relative || "") + url,
                            pageParam: options
                        })
                    },
                },
            })
            api.addEventListener({
                name: 'cvIsEdit'
            }, function (ret) {
                vm.isEdit = ret.value.isEdit;
            })

        }
    </script>
</body>

</html>
